<template name="GeneralCard">
	<view class="card">
		<!-- StratCardHeader -->
		<view class="card_header">
			<view class="left">
				<image lazy-load class="header_avatar" :src="avatar" mode="scaleToFill"></image>
				<view class="titleAndNote">
					<view class="header_tltle">{{ tltle }}</view>
					<view class="header_note">{{ note || '' }}</view>
				</view>
				<slot name="header_left_extend"><!-- 左侧自由拓展功能 --></slot>
			</view>
			<view class="right">
				<slot name="header_right_extend">
					<view class="close"><text class="iconfont icon-guanbi" @click="removeSlef"></text></view>
				</slot>
			</view>
		</view>
		<!--EndCardHeader-->
		<!-- StartCardBody -->
		<view class="crad_body">
			<view class="body_tltle">
				<slot><!-- 匿名插槽 --></slot>
			</view>
			<slot name="body_extend"></slot>
		</view>
		<!-- EndCradBody -->
		<!-- StartCardExtend -->
		<view class="card_extend"><slot name="card_extend"></slot></view>
		<!-- EndCardExtend -->
		<!-- StartCardFooter -->
		<slot name="footer_extend">
			<view class="card_footer">
				<view class="foot_left"><slot name="foot_left_extend">foot left</slot></view>
				<view class="foot_center">
					<slot name="foot_center_extend"><!-- foot center --></slot>
				</view>
				<view class="foot_right"><slot name="foot_right_extend">foot right</slot></view>
			</view>
		</slot>
	</view>
	<!-- </view> -->
</template>

<script>
export default {
	name: 'GeneralCard',
	props: ['avatar', 'tltle', 'note'],
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss">
.card {
	width: 100%;
	flex-shrink: 0;
	position: relative;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	background-color: #fff;
}

.card_header {
	position: relative;
	width: 100%;
	height: 90rpx;
	align-items: center;
	flex-shrink: 0;
	justify-content: space-between;
	// padding-bottom: 10rpx;

	.header_avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50rpx;
		margin-left: 35rpx;
	}

	.titleAndNote {
		padding-left: 15rpx;
		flex-wrap: wrap;

		.header_tltle,
		.header_note {
			height: 50%;
			width: 100%;
			flex-shrink: 0;
			font-size: 28rpx;
		}

		.header_note {
			font-size: 25rpx;
			color: #808080;
		}
	}

	.right {
		position: absolute;
		right: 35rpx;
		top: 0rpx;
		height: 100%;
		.close {
			height: 100%;
			align-items: center;
		}
	}
}

.crad_body {
	position: relative;
	width: calc(100% - 70rpx);
	align-items: center;
	flex-shrink: 0;
	justify-content: space-between;
	padding: 10rpx 35rpx;
	flex-wrap: wrap;

	.body_tltle {
		width: 100%;
		flex-shrink: 0;
	}
}

.card_extend,
.card_footer {
	position: relative;
	width: 100%;
	align-items: center;
	flex-shrink: 0;
}

.card_footer {
	justify-content: space-between;
	height: 90rpx;
	margin: 0 35rpx;
	.foot_left {
		margin-left: 35rpx;
	}
	.foot_right {
		// margin-right: 35rpx;
	}
}
</style>
